<template>
  <div>
    <ContentHeader title="开通课程记录">
      <el-form v-model="store.search" inline>
        <el-form-item>
          <el-input v-model="store.search.studentName" placeholder="请填写学员姓名" clearable />
        </el-form-item>
        <el-form-item>
          <el-input v-model="store.search.lessonTitle" placeholder="请填写课程名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-col :span="11"
            ><el-date-picker
              v-model="store.search.openStartDate"
              type="date"
              placeholder="请选择开通起始日期"
              clearable
          /></el-col>
          <el-col :span="2">-</el-col>
          <el-col :span="11"
            ><el-date-picker
              v-model="store.search.openEndDate"
              type="date"
              placeholder="请选择开通结束日期"
              clearable
          /></el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
          </el-button>
        </el-form-item>
      </el-form>
    </ContentHeader>
    <ContentBody v-loading="store.loading">
      <el-table :data="store.items" :stripe="true" :highlight-current-row="true">
        <el-table-column property="id" width="80" />
        <el-table-column property="studentName" label="学员姓名" />
        <el-table-column property="lessonTitle" label="开通课程" />
        <el-table-column property="expireTime" label="到期时间" />
        <el-table-column
          property="createdAt"
          label="首次开通时间"
          :formatter="(row: any) => timeFormatter(row.createdAt)"
        />
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button plain @click="handleClose(scope.row)">
              <el-icon><Delete /></el-icon> 关闭课程
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #pagination>
        <el-pagination
          background
          hideOnSinglePage
          layout="prev,pager,next"
          :total="store.pager.total"
          :page-size="store.pager.pageSize"
          @current-change="handlePageChange"
        />
      </template>
    </ContentBody>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Search, Delete } from '@element-plus/icons-vue'
import { useStudentLessonStore } from '@/stores/studentLesson'
import { timeFormatter } from '@/utils/utils'

const store = useStudentLessonStore()
const handlePageChange = (page: number) => {
  store.changePage(page, store.search.limit)
}
const handleSearch = () => {
  store.changePage(1, store.search.limit)
}
const handleClose = (row: any) => {
  ElMessageBox.confirm(
    `确定要关闭学员"${row.studentName}"的课程"${row.lessonTitle}"吗`,
    '确定关闭',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }
  ).then(async () => {
    const result = await store.closeLesson(row.id)
    if (result) {
      ElMessage.success('关闭成功')
      store.loadItems()
    }
  })
}

onMounted(() => {
  store.loadItems()
})
</script>
